'use client'
// import { Button } from '@/components/ui/button'
import { Loader2, RefreshCw, ArrowDownCircle } from 'lucide-react'
import { cn } from '@/lib/utils'
import { useLoadingStore } from '@/stores/loading-store'

interface LoadingSpinnerProps {
  size?: 'sm' | 'default' | 'lg'
  message?: string
  theme?: 'light' | 'primary' | 'secondary'
}

export function LoadingSpinner({
  size = 'default',
  message,
  theme = 'primary',
}: LoadingSpinnerProps) {
  const sizeClasses = {
    sm: 'h-4 w-4',
    default: 'h-8 w-8',
    lg: 'h-12 w-12',
  }

  const themeClasses = {
    light: 'text-white',
    primary: 'text-primary',
    secondary: 'text-gray-400',
  }

  return (
    <div className="flex flex-col items-center justify-center gap-3">
      <Loader2
        className={cn('animate-spin', sizeClasses[size], themeClasses[theme])}
      />
      {message && (
        <p className={cn('text-sm font-medium animate-pulse', themeClasses[theme])}>
          {message}
        </p>
      )}
    </div>
  )
}

export function GlobalLoading() {
  const isLoading = useLoadingStore((state) => state.isLoading)
  const message = useLoadingStore((state) => state.message)

  if (!isLoading) return null

  return (
    // 模糊样式 backdrop-blur-[2px]
    <div className="fixed inset-0 z-50 bg-black/20 dark:bg-black/40">
      <div className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
        <div className="rounded-lg bg-white/80 dark:bg-gray-900/90 p-8 shadow-xl backdrop-blur-sm">
          <div className="flex flex-col items-center gap-6">
            {/* 顶部加载动画 */}
            <div className="relative">
              <div className="absolute inset-0 animate-ping opacity-20">
                <div className="h-16 w-16 rounded-full bg-primary/60" />
              </div>
              <RefreshCw className="h-10 w-10 animate-spin text-primary" />
            </div>

            {/* 加载文字 */}
            <div className="flex flex-col items-center gap-2">
              <h3 className="text-lg font-normal text-gray-900 dark:text-gray-100">
                loading...
              </h3>
              <p
                className={cn(
                  'text-sm h-5 leading-snug text-gray-500 dark:text-gray-400 text-center max-w-[200px]',
                  !!message ? 'opacity-1' : 'opacity-0',
                )}
              >
                {message}
              </p>
            </div>

            {/* 底部加载指示器 */}
            <div className="flex items-center gap-2">
              <div className="h-1 w-1 animate-bounce rounded-full bg-primary delay-100" />
              <div className="h-1 w-1 animate-bounce rounded-full bg-primary delay-200" />
              <div className="h-1 w-1 animate-bounce rounded-full bg-primary delay-300" />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

// 小型加载指示器，用于按钮或其他小组件内
export function ButtonSpinner() {
  return <ArrowDownCircle className="mr-2 h-4 w-4 animate-spin" />
}

// 示例用法
// const LoadingExample = () => {
//   return (
//     <div className="space-y-4">
//       {/* 按钮中的加载状态 */}
//       <Button disabled>
//         <ButtonSpinner />
//         正在加载...
//       </Button>

//       {/* 内联加载状态 */}
//       <div className="p-4 border rounded">
//         <LoadingSpinner size="sm" message="加载中..." />
//       </div>

//       {/* 全局加载状态 */}
//       <Button
//         onClick={() =>
//           useLoadingStore.getState().setLoading(true, '正在处理您的请求...')
//         }
//       >
//         显示全局 Loading
//       </Button>
//     </div>
//   )
// }
